<template>
  <div>双向绑定：父组件计数器：{{countModel}}</div>
  <BlogPost 
   v-for="(post, index) in posts" 
   :key="index" 
   :post-title="post.title" 
   :post-content="post.content"
   v-model:count="countModel"
   @click="handlePostClick(post.title)"
   >
   </BlogPost>
</template>
<script setup>
import { ref } from 'vue';
import BlogPost from './BlogPost.vue'
/**
 *  🍓emit 事件
 */
const emit = defineEmits(['choosen-book'])

const posts = ref([
  {
    title: '《钢铁是怎样炼成的》',
    content: '内容：钢铁是怎样炼成的男主保尔柯察金，在....'
  },
  {
    title: '《天龙八部》',
    content: '作者：金庸，出版社：上海人民出版社，出版年：1999，页数：384，ISBN：9787301001001'
  }
])
const countModel = ref(0)

const handlePostClick = (title) => {
  emit('choosen-book', title)
}
</script>